<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin: 30px auto;
        position: relative;
      }

      .box .text {
        font-size: 50px;
        color: red;
      }

      #canvas {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span class="text"></span>
      <canvas id="canvas"></canvas>
    </div>
  </body>
  <script>
    let arr = [
      '200元',
      '300元',
      '400元',
      '500元',
      '600元',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
      '谢谢',
    ];
    let canvas;
    (function init() {
      canvas = document.getElementById('canvas');
      canvas.width = 200;
      canvas.height = 100;
      let ctx = canvas.getContext('2d');
      // 设置随机值
      setResult();
      // 设置canvas遮盖
      drawMask(ctx);
      // 移动划开遮盖
      drawStroke(ctx);
    })();
    function setResult() {
      let max = arr.length - 1;
      let randomInx = randomNum(0, max);
      let text = document.getElementsByClassName('text')[0];
      text.innerText = arr[randomInx];
    }

    function randomNum(min, max) {
      return parseInt(Math.random() * (max - min + 1) + min);
    }

    function drawMask(ctx) {
      ctx.fillStyle = 'rgb(166,166,166)';
      ctx.fillRect(0, 0, 200, 100);
    }

    function drawStroke(ctx) {
      canvas.onmousedown = function (e) {
        let downX = e.offsetX;
        let downY = e.offsetY;

        ctx.beginPath();
        ctx.globalCompositeOperation = 'destination-out';
        ctx.lineWidth = 8;

        ctx.moveTo(downX, downY);

        canvas.onmousemove = function (e) {
          ctx.lineTo(e.offsetX, e.offsetY);
          ctx.stroke();
        };

        canvas.onmouseup = function (e) {
          canvas.onmousemove = null;
        };
      };
    }
  </script>
</html>
